<?xml version="1.0" encoding='UTF-8'?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ice="http://www.icesoft.com/icefaces/component">
    <body>

      <ui:composition template="./template.xhtml">

        <ui:define name="navigation">
          <ice:form>
            <ul>
              <li><a href="#">#{msg.userdata}</a></li>
              <li><a href="#">#{msg.back}</a></li>
              <li><h:link outcome="index" value="#{msg.logout}(#{lc.username})"/></li>
            </ul>
          </ice:form>
        </ui:define>
        <ui:define name="accessibility">
          <ul class="accessibility">
            <li><a href="#navigation" accesskey="2">Navigation</a></li>
            <li><a href="#board" accesskey="0">Spielbrett</a></li>
            <li><a href="#dicearea" accesskey="1">W&uuml;rfel</a></li>
            <li><a href="#info_area" accesskey="3">Spielstand</a></li>
          </ul>
        </ui:define>
          
        <ui:define name="content">  
          <div id="info_area">
            
            <h:form id="restartForm">
              <h:commandButton value="#{msg.restartgame}" action="#{lc.mc.restartGame()}" rendered="#{lc.mc.gameOver}">
                <f:ajax render=":ajaxDice :ajaxInfo :ajaxPlay :restartForm"/>
              </h:commandButton>
            </h:form>

            <h:panelGroup id="ajaxInfo">
              <h2>#{msg.gameinfo}</h2>
              <table class="game_info" summary="Diese Tabelle zeigt Informationen zum aktuellen Spiel">
                <tbody>
                  <tr class="accessibility">
                    <th>#{msg.info}</th>
                    <th>#{msg.value}</th>
                  </tr>
                  <tr>
                    <th>#{msg.playercount}</th>
                    <td>2</td>
                  </tr>
                  <tr>
                    <th>#{msg.leader}</th>
                    <td>#{lc.mc.leaderName}</td>
                  </tr>
                  <tr>
                    <th>#{msg.actualround}</th>
                    <td>#{lc.mc.round}</td>
                  </tr>
                  <tr>
                    <th>#{msg.time}</th>
                    <td>#{lc.mc.time}</td>
                  </tr>
                </tbody>
              </table>
            </h:panelGroup>
            
            <h2>#{msg.player}</h2>
            <table class="game_info" summary="Diese Tabelle listet die Namen der Spieler auf">
              <tbody>
                <tr class="accessibility">
                  <th>#{msg.playernum}</th>
                  <th>#{msg.playername}</th>
                </tr>
                <tr>
                  <th>#{msg.player} 1</th>
                  <td>#{lc.username}</td>
                </tr>
                <tr>
                  <th>#{msg.player} 2</th>
                  <td>Computer</td>
                </tr>              
              </tbody>
            </table>
          </div>
            <div id="avatar_area">
                <h:form>
                <h:graphicImage alt="Avatar Bild" title="Avatar Bild" value="#{lc.player.avatarURL}"/>
                </h:form>
            </div>
            
          <h:panelGroup id="ajaxDice"> 
            <h:form id="dicearea">
              <hr class="accessibility" />
              <h2 class="accessibility">#{msg.dice}</h2>
              <span title="#{msg.actualplayer}">#{lc.mc.currentPlayerName}</span>
              <h:commandButton id="wuerfel" action="#{lc.mc.rollDice()}" title="#{msg.dicecnt} #{lc.mc.score}" image="img/wuerfel#{lc.mc.score}.png" alt="#{msg.dicecnt} #{lc.mc.score}">
                <f:ajax render=":ajaxPlay :ajaxInfo :ajaxDice :restartForm"/>
              </h:commandButton>
            </h:form>
          </h:panelGroup>

          <h:panelGroup id="ajaxPlay">  
          <div id="play_area">
            <hr class="accessibility" />
            <div id="board">
              <h2 class="accessibility">#{msg.gameboard}</h2>
              <div class="fields">
                <h3 class="accessibility">#{msg.gamefields}</h3>
                <ol title="#{msg.gamefields}">
                  <ui:fragment id="repeat" >
                      <ui:repeat value="#{lc.mc.boardFields}" var="field" varStatus="status" end="39">
                      
                      <li>
                        <h:graphicImage class="field#{status.index+1}" value="/img/field1.png"         alt='#{msg.field} #{status.index+1}: #{msg.first} 1' title='#{msg.field} #{status.index+1}: #{msg.first} 1' rendered="#{field.occupyingPlayer lt 0 and status.index == 0}"/>
                        <h:graphicImage class="field#{status.index+1}" value="/img/field1_player#{field.occupyingPlayer}.png" alt='#{msg.field} #{status.index+1}: #{msg.first} 1: #{msg.player} #{field.occupyingPlayer}' title='#{msg.field} #{status.index+1}: #{msg.first} 1: #{msg.player} #{field.occupyingPlayer}' rendered="#{field.occupyingPlayer gt 0 and status.index == 0}"/>
                        <h:graphicImage class="field#{status.index+1}" value="/img/field2.png"         alt='#{msg.field} #{status.index+1}: #{msg.first} 2' title='#{msg.field} #{status.index+1}: #{msg.first} 2' rendered="#{field.occupyingPlayer lt 0 and status.index == 10}"/>
                        <h:graphicImage class="field#{status.index+1}" value="/img/field2_player#{field.occupyingPlayer}.png" alt='#{msg.field} #{status.index+1}: #{msg.first} 2: #{msg.player} #{field.occupyingPlayer}' title='#{msg.field} #{status.index+1}: #{msg.first} 2: #{msg.player} #{field.occupyingPlayer}' rendered="#{field.occupyingPlayer gt 0 and status.index == 10}"/>
                        <h:graphicImage class="field#{status.index+1}" value="/img/field3.png"         alt='#{msg.field} #{status.index+1}: #{msg.first} 3' title='#{msg.field} #{status.index+1}: #{msg.first} 3' rendered="#{field.occupyingPlayer lt 0 and status.index == 20}"/>
                        <h:graphicImage class="field#{status.index+1}" value="/img/field3_player#{field.occupyingPlayer}.png" alt='#{msg.field} #{status.index+1}: #{msg.first} 3: #{msg.player} #{field.occupyingPlayer}' title='#{msg.field} #{status.index+1}: #{msg.first} 3: #{msg.player} #{field.occupyingPlayer}' rendered="#{field.occupyingPlayer gt 0 and status.index == 20}"/>
                        <h:graphicImage class="field#{status.index+1}" value="/img/field4.png"         alt='#{msg.field} #{status.index+1}: #{msg.first} 4' title='#{msg.field} #{status.index+1}: #{msg.first} 4' rendered="#{field.occupyingPlayer lt 0 and status.index == 30}"/>
                        <h:graphicImage class="field#{status.index+1}" value="/img/field4_player#{field.occupyingPlayer}.png" alt='#{msg.field} #{status.index+1}: #{msg.first} 4: #{msg.player} #{field.occupyingPlayer}' title='#{msg.field} #{status.index+1}: #{msg.first} 4: #{msg.player} #{field.occupyingPlayer}' rendered="#{field.occupyingPlayer gt 0 and status.index == 30}"/>

                        <h:graphicImage class="field#{status.index+1}" value="/img/field.png" alt='#{msg.field} #{status.index+1}: #{msg.last} 1' title='#{msg.field} #{status.index+1}: #{msg.last} 1' rendered="#{field.occupyingPlayer lt 0 and status.index == 39}"/>
                        <h:graphicImage class="field#{status.index+1}" value="/img/field_player#{field.occupyingPlayer}.png" alt='#{msg.field} #{status.index+1}: #{msg.last} 1: #{msg.player} #{field.occupyingPlayer}' title='#{msg.field} #{status.index+1}: #{msg.last} 1: #{msg.player} #{field.occupyingPlayer}' rendered="#{field.occupyingPlayer gt 0 and status.index == 39}"/>
                        <h:graphicImage class="field#{status.index+1}" value="/img/field.png" alt='#{msg.field} #{status.index+1}: #{msg.last} 2' title='#{msg.field} #{status.index+1}: #{msg.last} 2' rendered="#{field.occupyingPlayer lt 0 and status.index == 9}"/>
                        <h:graphicImage class="field#{status.index+1}" value="/img/field_player#{field.occupyingPlayer}.png" alt='#{msg.field} #{status.index+1}: #{msg.last} 2: #{msg.player} #{field.occupyingPlayer}' title='#{msg.field} #{status.index+1}: #{msg.last} 2: #{msg.player} #{field.occupyingPlayer}' rendered="#{field.occupyingPlayer gt 0 and status.index == 9}"/>
                        <h:graphicImage class="field#{status.index+1}" value="/img/field.png" alt='#{msg.field} #{status.index+1}: #{msg.last} 3' title='#{msg.field} #{status.index+1}: #{msg.last} 3' rendered="#{field.occupyingPlayer lt 0 and status.index == 19}"/>
                        <h:graphicImage class="field#{status.index+1}" value="/img/field_player#{field.occupyingPlayer}.png" alt='#{msg.field} #{status.index+1}: #{msg.last} 3: #{msg.player} #{field.occupyingPlayer}' title='#{msg.field} #{status.index+1}: #{msg.last} 3: #{msg.player} #{field.occupyingPlayer}' rendered="#{field.occupyingPlayer gt 0 and status.index == 19}"/>
                        <h:graphicImage class="field#{status.index+1}" value="/img/field.png" alt='#{msg.field} #{status.index+1}: #{msg.last} 4' title='#{msg.field} #{status.index+1}: #{msg.last} 4' rendered="#{field.occupyingPlayer lt 0 and status.index == 29}"/>
                        <h:graphicImage class="field#{status.index+1}" value="/img/field_player#{field.occupyingPlayer}.png" alt='#{msg.field} #{status.index+1}: #{msg.last} 4: #{msg.player} #{field.occupyingPlayer}' title='#{msg.field} #{status.index+1}: #{msg.last} 4: #{msg.player} #{field.occupyingPlayer}' rendered="#{field.occupyingPlayer gt 0 and status.index == 29}"/>

                        <h:graphicImage class="field#{status.index+1}" value="/img/field.png"         alt='#{msg.field} #{status.index+1}' title='#{msg.field} #{status.index+1}' rendered="#{field.occupyingPlayer lt 0 and status.index != 0 and status.index != 10 and status.index != 20 and status.index != 30 and status.index != 9 and status.index != 19 and status.index != 29 and status.index != 39}"/>
                        <h:graphicImage class="field#{status.index+1}" value="/img/field_player#{field.occupyingPlayer}.png" alt='#{msg.field} #{status.index+1}: #{msg.player} #{field.occupyingPlayer}' title='#{msg.field} #{status.index+1}: #{msg.player} #{field.occupyingPlayer}' rendered="#{field.occupyingPlayer gt 0 and status.index != 0 and status.index != 10 and status.index != 20 and status.index != 30 and status.index != 9 and status.index != 19 and status.index != 29 and status.index != 39}"/>
                      </li>
                    </ui:repeat>
                  </ui:fragment>
                </ol>
                <h3 class="accessibility">#{msg.homes}</h3>
                <ol title="#{msg.homesplayer}1">
                  <ui:repeat value="#{lc.mc.boardFields}" var="field" varStatus="status" begin="40" end="43">
                    <ui:fragment rendered="#{field.occupyingPlayer lt 0}">
                      <li><h:graphicImage class="field#{status.index+1}" value="/img/field1.png" alt='#{msg.field} #{status.index+1}: #{msg.start} 1' title='#{msg.field} #{status.index+1}: #{msg.start} 1'/></li>
                    </ui:fragment>
                    <ui:fragment rendered="#{field.occupyingPlayer == 1}">
                      <li><h:graphicImage class="field#{status.index+1}" value="/img/field1_player1.png" alt='#{msg.field} #{status.index+1}: #{msg.start} 1: #{msg.player} 1' title='#{msg.field} #{status.index+1}: #{msg.start} 1: #{msg.player} 1'/></li>
                    </ui:fragment>
                  </ui:repeat>
                </ol>
                <ol title="#{msg.homesplayer}2">
                  <ui:repeat value="#{lc.mc.boardFields}" var="field" varStatus="status" begin="44" end="47">
                    <ui:fragment rendered="#{field.occupyingPlayer lt 0}">
                      <li><h:graphicImage class="field#{status.index+1}" value="/img/field2.png" alt='#{msg.field} #{status.index+1}: #{msg.start} 2' title='#{msg.field} #{status.index+1}: #{msg.start} 2'/></li>
                    </ui:fragment>
                    <ui:fragment rendered="#{field.occupyingPlayer == 2}">
                      <li><h:graphicImage class="field#{status.index+1}" value="/img/field2_player2.png" alt='#{msg.field} #{status.index+1}: #{msg.start} 2: #{msg.player} 2' title='#{msg.field} #{status.index+1}: #{msg.start} 2: #{msg.player} 2'/></li>
                    </ui:fragment>
                  </ui:repeat>
                </ol>
                <ol title="#{msg.homesplayer}3">        
                  <ui:repeat value="#{lc.mc.boardFields}" var="field" varStatus="status" begin="48" end="51">
                    <ui:fragment rendered="#{field.occupyingPlayer lt 0}">
                      <li><h:graphicImage class="field#{status.index+1}" value="/img/field3.png" alt='#{msg.field} #{status.index+1}: #{msg.start} 3' title='#{msg.field} #{status.index+1}: #{msg.start} 3'/></li>
                    </ui:fragment>
                    <ui:fragment rendered="#{field.occupyingPlayer == 3}">
                      <li><h:graphicImage class="field#{status.index+1}" value="/img/field3_player3.png" alt='#{msg.field} #{status.index+1}: #{msg.start} 3: #{msg.player} 3' title='#{msg.field} #{status.index+1}: #{msg.start} 3: #{msg.player} 3'/></li>
                    </ui:fragment>
                  </ui:repeat>
                </ol>
                <ol title="#{msg.homesplayer}4">
                  <ui:repeat value="#{lc.mc.boardFields}" var="field" varStatus="status" begin="52" end="55">
                    <ui:fragment rendered="#{field.occupyingPlayer lt 0}">
                      <li><h:graphicImage class="field#{status.index+1}" value="/img/field4.png" alt='#{msg.field} #{status.index+1}: #{msg.start} 4' title='#{msg.field} #{status.index+1}: #{msg.start} 4'/></li>
                    </ui:fragment>
                    <ui:fragment rendered="#{field.occupyingPlayer == 4}">
                      <li><h:graphicImage class="field#{status.index+1}" value="/img/field4_player4.png" alt='#{msg.field} #{status.index+1}: #{msg.start} 4: #{msg.player} 4' title='#{msg.field} #{status.index+1}: #{msg.start} 4: #{msg.player} 4'/></li>
                    </ui:fragment>
                  </ui:repeat>    
                </ol>
                <h3 class="accessibility">#{msg.targets}</h3>
                <ol title="#{msg.targetsplayer}1">
                  <ui:repeat value="#{lc.mc.boardFields}" var="field" varStatus="status" begin="56" end="59">
                    <ui:fragment rendered="#{field.occupyingPlayer lt 0}">
                      <li><h:graphicImage class="field#{status.index+1}" value="/img/field1.png" alt='#{msg.field} #{status.index+1}: #{msg.finish} 1' title='#{msg.field} #{status.index+1}: #{msg.finish} 1'/></li>
                    </ui:fragment>
                    <ui:fragment rendered="#{field.occupyingPlayer == 1}">
                      <li><h:graphicImage class="field#{status.index+1}" value="/img/field1_player1.png" alt='#{msg.field} #{status.index+1}: #{msg.finish} 1: #{msg.player} 1' title='#{msg.field} #{status.index+1}: #{msg.finish} 1: #{msg.player} 1'/></li>
                    </ui:fragment>
                  </ui:repeat>
                </ol>
                <ol title="#{msg.targetsplayer}2">      
                  <ui:repeat value="#{lc.mc.boardFields}" var="field" varStatus="status" begin="60" end="63">
                    <ui:fragment rendered="#{field.occupyingPlayer lt 0}">
                      <li><h:graphicImage class="field#{status.index+1}" value="/img/field2.png" alt='#{msg.field} #{status.index+1}: #{msg.finish} 2' title='#{msg.field} #{status.index+1}: #{msg.finish} 2'/></li>
                    </ui:fragment>
                    <ui:fragment rendered="#{field.occupyingPlayer == 2}">
                      <li><h:graphicImage class="field#{status.index+1}" value="/img/field2_player2.png" alt='#{msg.field} #{status.index+1}: #{msg.finish} 2: #{msg.player} 2' title='#{msg.field} #{status.index+1}: #{msg.finish} 2: #{msg.player} 2'/></li>
                    </ui:fragment>
                  </ui:repeat>
                </ol>
                <ol title="#{msg.targetsplayer}3">              
                  <ui:repeat value="#{lc.mc.boardFields}" var="field" varStatus="status" begin="64" end="67">
                    <ui:fragment rendered="#{field.occupyingPlayer lt 0}">
                      <li><h:graphicImage class="field#{status.index+1}" value="/img/field3.png" alt='#{msg.field} #{status.index+1}: Zielfeld Spieler 3' title='#{msg.field} #{status.index+1}: #{msg.finish} 3'/></li>
                    </ui:fragment>
                    <ui:fragment rendered="#{field.occupyingPlayer == 3}">
                      <li><h:graphicImage class="field#{status.index+1}" value="/img/field3_player3.png" alt='#{msg.field} #{status.index+1}: #{msg.finish} 3: #{msg.player} 3' title='#{msg.field} #{status.index+1}: #{msg.finish} 3: #{msg.player} 3'/></li>
                    </ui:fragment>
                  </ui:repeat>
                </ol>
                <ol title="#{msg.targetsplayer}4">              
                  <ui:repeat value="#{lc.mc.boardFields}" var="field" varStatus="status" begin="68" end="71">
                    <ui:fragment rendered="#{field.occupyingPlayer lt 0}">
                      <li><h:graphicImage class="field#{status.index+1}" value="/img/field4.png" alt='#{msg.field} #{status.index+1}: #{msg.finish} 4' title='#{msg.field} #{status.index+1}: #{msg.finish} 4'/></li>
                    </ui:fragment>
                    <ui:fragment rendered="#{field.occupyingPlayer == 4}">
                      <li><h:graphicImage class="field#{status.index+1}" value="/img/field4_player4.png" alt='#{msg.field} #{status.index+1}: #{msg.finish} 4: #{msg.player} 4' title='#{msg.field} #{status.index+1}: #{msg.finish} 4: #{msg.player} 4'/></li>
                    </ui:fragment>
                  </ui:repeat>
                </ol>
              </div>
              <div class="clearer"></div>  
              <div id="infogegner">#{msg.resultopponent} Computer: #{lc.mc.opponentScore}</div>
              <div id="tweet"><h:outputText value="UUID #{lc.mc.uuid} #{msg.tweet}" rendered="#{lc.mc.uuidSet}"/></div>
              <div id="tweetError"><h:outputText value="#{msg.twitterError}" rendered="#{!lc.mc.tweetSuccess}"/></div>
              <div id="highscoreError"><h:outputText value="#{msg.highScoreError}" rendered="#{!lc.mc.highscorePublishSuccess}"/></div>
            </div>
          </div>        
          </h:panelGroup>

        </ui:define>
      </ui:composition>
    </body>
</html>                           